<template lang="pug">
  div
    MaskLayer(:zIndex="mlZIndex")
    .common-dialog-body(:style="{width: width + 'px', height: height + 'px', zIndex: zIndex}")
      .common-dialog-header
        span {{title}}
        i.iconfont.icon-guanbi(@click="$emit('close')")
      .common-dialog-content
        slot(name="content")
      .common-dialog-footer
        slot(name="footer")
</template>

<script>
import MaskLayer from '../MaskLayer'
export default {
  props: {
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    zIndex: {
      type: Number,
      required: false,
      default: 20001
    },
    mlZIndex: {
      type: Number,
      required: false
    }
  },
  components: {MaskLayer}
}
</script>

<style scoped lang="stylus">
  .common-dialog-body
    position fixed
    background-color #fff
    top 50%
    left 50%
    border-radius 8px
    transform translate(-50%, -50%)
  .common-dialog-header
    display flex
    justify-content space-between
    height 44px
    font-size 16px
    line-height 46px
    padding 0 20px
    border-bottom 1px solid #e3e3e3
    > span
      font-weight bold
      font-size 18px
    > i
      cursor pointer
  .common-dialog-content
    height calc(100% - 100px)
    .global-container-content
      height 100%
      border 0
      margin-top 0
  .common-dialog-footer
    display flex
    justify-content center
    align-items center
    height 55px
</style>
